<template>
  <div class="container1">
    <div class="logo-wrap">
      <!-- <img :src="logo" alt class="logo" /> -->
    </div>
    <div class="main-c" v-if="false">
      <div class="main-head">
        <h2>{{siteNamePY}}</h2>
      </div>
      <div class="login-wrap">
        <div class="tab">
          <div
            :class="['tab-item', {'active': login_type == 'pwd'}]"
            @click="login_type = 'pwd'"
          >账号登录</div>
          <div
            :class="['tab-item', {'active': login_type == 'msg'}]"
            @click="login_type = 'msg'"
          >快速登录</div>
        </div>
        <div class="login-form" v-if="login_type == 'pwd'">
          <el-input placeholder="手机号码" prefix-icon="el-icon-user" v-model="phone"></el-input>
          <el-input
            @keyup.enter.native="login"
            placeholder="密码"
            type="password"
            prefix-icon="el-icon-lock"
            v-model="password"
          ></el-input>
          <div class="check-line">
            <el-checkbox v-model="remenber_pwd">记住密码</el-checkbox>
          </div>
          <el-button v-no-more-click:3000 type="primary" class="btn-login" @click.stop="login">登录</el-button>
        </div>
        <div class="login-form" v-else>
          <el-input placeholder="手机号码" prefix-icon="el-icon-user" v-model="phone"></el-input>
          <el-row type="flex" class="verification-code-box">
            <el-col :span="24">
              <el-input
                @keyup.enter.native="login"
                v-model="verificationCode"
                placeholder="验证码"
                style="margin-bottom: 5px"
              ></el-input>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="10">
              <el-button
                v-no-more-click:3000
                :disabled="btnIsDisabled"
                type="primary"
                @click="getVCode()"
              >{{VCodeText}}</el-button>
            </el-col>
          </el-row>
          <div class="check-line"></div>
          <el-button v-no-more-click:3000 type="primary" class="btn-login" @click.stop="login">登录</el-button>
        </div>
      </div>
    </div>
    <div class="top-area" :style="'background-image: url('+ backImg +')'"></div>
    <div class="center-area">
      <div class="switch-btn">
        <div :class="['btn-item', {'active': login_type == 'pwd'}]" @click="login_type = 'pwd'">登录</div>
        <div :class="['btn-item', {'active': login_type == 'msg'}]" @click="login_type = 'msg'">快捷登录</div>
      </div>
      <div class="form-wrap">
        <div class="wel">欢迎登录</div>
        <div>
          <el-input placeholder="手机号码" prefix-icon="el-icon-user" v-model="phone" class="mb20"></el-input>
          <el-input
            v-if="login_type == 'pwd'"
            class="mb10"
            @keyup.enter.native="login"
            placeholder="密码"
            type="password"
            prefix-icon="el-icon-lock"
            v-model="password"
          ></el-input>
          <el-row type="flex" class="verification-code-box" v-else>
            <el-col :span="24">
              <el-input
                @keyup.enter.native="login"
                v-model="verificationCode"
                placeholder="验证码"
                class="mb10"
                @input='msgInput'
                prefix-icon="el-icon-chat-dot-square"
              ></el-input>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="10">
              <el-button
                v-no-more-click:3000
                :disabled="btnIsDisabled"
                type="primary"
                @click="getVCode()"
                class="btn-login"
                style="margin-bottom: 0"
              >{{VCodeText}}</el-button>
            </el-col>
          </el-row>
          <div class="check-line mb10">
            <el-checkbox v-model="auto_login" class="mr10" v-if="login_type == 'pwd'">自动登录</el-checkbox>
            <el-checkbox v-model="remenber_pwd" v-if="login_type == 'pwd'">记住密码</el-checkbox>
          </div>
          <el-button v-no-more-click:3000 type="primary" v-if="login_type == 'pwd'" class="btn-login" @click.stop="login">登录</el-button>
          <!-- <div class="pt15 f16">
            您还没有账号？
            <router-link :to="{ name: 'preRegister'}">快速注册</router-link>
          </div> -->
        </div>
      </div>
    </div>
    <div class="bottom-area">
      <div class="copy-right">{{record}}</div>
    </div>
  </div>
</template>

<script>
import { prelogin, preCodelogin, login, codeLogin } from "~/api/login";
import aes from "~/util/aes.js";
import { validation } from "./validate";
import logo from "~/assets/img/head_logo.png";
import { RECORD, SITE_NAME_PY } from '~/util/config'
export default {
  head: {
    title: "登录-专利服务管理系统"
  },
  data() {
    return {
      logo: logo,
      backImg: require("~/assets/img/order-login.jpg"),
      login_type: "pwd",
      phone: "",
      password: "",
      verificationCode: "",
      VCodeText: "获取验证码",
      btnIsDisabled: false,
			remenber_pwd: false,
      auto_login: false,
      siteNamePY: SITE_NAME_PY,
      record: RECORD
    };
	},
	watch: {
		// 记住密码
		remenber_pwd (newValue, oldValue) {
			if(process.client) {
				window.localStorage.setItem('remenber_pwd', JSON.stringify(newValue))
			}
		},
		// 自动登录
		auto_login (newValue, oldValue) {
			if(process.client) {
				window.localStorage.setItem('auto_login', JSON.stringify(newValue))
			}
			if (this.auto_login) {
				this.remenber_pwd = true
			}
		}
	},
  created() {
    if (process.client) {
			this.$nextTick( () => {
				if(process.client) {
					this.remenber_pwd = JSON.parse(window.localStorage.getItem('remenber_pwd'))
					this.auto_login = JSON.parse(window.localStorage.getItem('auto_login'))
				}
			})

			if (JSON.parse(window.localStorage.getItem('remenber_pwd'))) {
				let userInfo = JSON.parse(aes.Decrypt(window.localStorage.getItem('agentUserInfo')))
				console.log(userInfo)
				if(userInfo) {
					this.phone = userInfo.phone
					this.password = window.atob(userInfo.pwd)
				}
			}
			// 是否自动登录
			if(JSON.parse(window.localStorage.getItem('auto_login'))) {
				this.login()
			}
    }
  },
  mounted() {},
  methods: {
    msgInput(value) {
      if (value.length == 6) {
        this.login()
      }
    },
    login() {
      let that = this;
      //效验
      let validationError =
        this.login_type == "pwd"
          ? validation({
              method: 1,
              phone: that.phone,
              password: that.password
            })
          : validation({
              phone: that.phone,
              code: that.verificationCode
            });
      if (validationError === "") {
        let postMethods = this.login_type == "pwd" ? prelogin : preCodelogin;
        let params = {
          phone: this.phone,
          password: this.password
        };
        if (this.login_type == "msg") {
          delete params.password;
          params.code = this.verificationCode;
        }
        postMethods(that.$axios, params).then(res => {
          if (res.data.code == 200) {
            if (res.data.data.user.status == "待初审") {
              this.$message({
                type: "error",
                message: "暂时无法登陆，请耐心等待审核员审核"
              });
            } else if (
              res.data.data.user.status == "初审通过" ||
              res.data.data.user.status == "已上传资料"
            ) {
              that.$cookies.remove("agent");
              that.$cookies.set("token", res.data.data.token);
              that.$store.commit("setToken", res.data.data.token);
              that.$axios.defaults.headers.common["Authorization"] =
                "Bearer " + res.data.data.token;
              that.$cookies.set(
                "user",
                aes.Encrypt(JSON.stringify(res.data.data.user))
              );
              that.$store.commit("setUser", res.data.data.user);
              if (this.login_type == "pwd") {
                if (this.remenber_pwd) {
                  let userInfo = {
                    phone: this.phone,
                    pwd: window.btoa(this.password)
									};
									if(process.client) {
										window.localStorage.setItem('agentUserInfo', aes.Encrypt(JSON.stringify(userInfo)))
									}
                //   window.localStorage.setItem(
                //     "userInfo",
                //     JSON.stringify(userInfo)
                //   );
                // } else {
                //   window.localStorage.removeItem("agentUserInfo");
                }
                // window.localStorage.setItem("is_remenber", this.remenber_pwd);
              }
              that.$router.push("/admin/agentImprove");
            } else {
              if (this.login_type == "pwd") {
                if (this.remenber_pwd) {
                  let userInfo = {
                    phone: this.phone,
                    pwd: window.btoa(this.password)
                  }
                //   window.localStorage.setItem(
                //     "agentUserInfo",
                //     JSON.stringify(userInfo)
                //   );
                // } else {
								//   window.localStorage.removeItem("agentUserInfo");
									if(process.client) {
										window.localStorage.setItem('agentUserInfo', aes.Encrypt(JSON.stringify(userInfo)))
									}
                }
                // window.localStorage.setItem("is_remenber", this.remenber_pwd);
              }
              that.$cookies.remove("agent");
              that.$cookies.set("token", res.data.data.token);
              that.$store.commit("setToken", res.data.data.token);
              that.$axios.defaults.headers.common["Authorization"] =
                "Bearer " + res.data.data.token;
              that.$cookies.set(
                "user",
                aes.Encrypt(JSON.stringify(res.data.data.user))
              );
              that.$store.commit("setUser", res.data.data.user);

              that.$router.push("/admin/order/pendingDisposal");
              // that.$router.push("/agent/home/menu");

              // let loginMethods = this.login_type == 'pwd' ? login : codeLogin
              // loginMethods(that.$axios,params).then(res => {
              // 	if(res.data.code==200){
              // 		that.$cookies.remove('agent');
              // 		that.$cookies.set('token',res.data.data.token);
              // 		that.$store.commit("setToken",res.data.data.token);
              // 		that.$axios.defaults.headers.common['Authorization'] = "Bearer " + res.data.data.token;
              // 		that.$cookies.set('user',aes.Encrypt(JSON.stringify(res.data.data.user)));
              // 		that.$store.commit("setUser",res.data.data.user);
              // 	}
              // })
            }
          } else {
            this.$alert(res.data.message, '提示', {
              confirmButtonText: '确定',
              center: true,
              type: "warning",
              callback: action => {
              }
            })
          }
        });
      } else {

        this.$alert(validationError, '提示', {
          confirmButtonText: '确定',
          center: true,
          type: "warning",
          callback: action => {
          }
        })
      }
    },
    getVCode() {
      let that = this;
      if (/^1[3456789]\d{9}$/.test(that.phone)) {
        let num = 60;
        that.btnIsDisabled = true;
        let timer = setInterval(function() {
          that.VCodeText = num + "秒后可重新发送";
          num -= 1;
          if (num < 0) {
            that.VCodeText = "获取验证码";
            that.btnIsDisabled = false;
            clearInterval(timer);
          }
        }, 1000);
        that.$axios
          .post("/api/captcha", {
            phone: that.phone,
            type: 2,
            guard: "agent"
          })
          .then(res => {
            if (res.data.code == 200) {
              that.$message({
                message: "验证码发送成功！",
                type: "success"
              });
            } else {
              that.VCodeText = "获取验证码";
              that.btnIsDisabled = false;
              clearInterval(timer);
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          });
      } else {
        that.$message({
          message: "手机号不能为空且格式不能有误",
          type: "warning"
        });
      }
    }
  },
  mounted() {
    if (this.$route.query.from) {
      this.$message({
        message: "您还没有登录",
        type: "warning"
      });
    }
  }
};
</script>


<style lang="less">
.container1 {
  -webkit-display: flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  margin: 0 auto;
  background: white;
  min-height: 100vh;
  position: relative;
  .logo-wrap {
    height: 80px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding-top: 5px;
    padding-left: 20px;
    box-sizing: border-box;
    .logo {
      display: block;
      height: 60px;
    }
  }
  //background-color: #f2f2f2;
  .logoImg {
    width: 200px;
    height: 60px;
    margin: 5px 0 15px 20px;
    box-sizing: border-box;
  }

  .box-card {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80px;
    .el-card__body {
      padding: 0;
    }
  }
  .main-c {
    width: 100%;
    margin-top: -109px;
    box-sizing: border-box;
  }
  .main-c .main-head,
  .login-wrap,
  .login-form {
    width: 375px;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
    .check-line {
      height: 21px;
      margin-bottom: 5px;
      text-align: right;
    }
  }
  .login-wrap {
    .tab {
      display: flex;
      align-items: center;
      .tab-item {
        flex: 1;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        border-bottom: 2px solid transparent;
        user-select: none;
        &.active {
          border-color: #409eff;
          color: #409eff;
        }
      }
    }
  }

  .main-head {
    height: 109px;
  }

  .main-head h2 {
    font-weight: 300;
    font-size: 30px;
    color: #000;
    margin: 0;
    padding-top: 20px;
  }

  .main-head .title-1 {
    font-weight: 300;
    color: #999;
  }

  .main-c .login-form {
    // height: 200px;
  }
  .login-form .el-input {
    margin-bottom: 15px;
    &:nth-child(2) {
      margin-bottom: 5px;
    }
  }

  .login-form .btn-login {
    width: 100%;
    margin-bottom: 30px;
  }
  .top-area {
    width: 100%;
    height: 300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex: 1.35;
    -webkit-flex: 1.35;
    position: relative;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
  }
  .center-area {
    z-index: 9;
    width: 515px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .title {
      color: #fff;
      font-size: 30px;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 20px;
    }
    .switch-btn {
      display: flex;
      display: -webkit-flex;
      width: 200px;
      margin: 0 auto;
      margin-bottom: 20px;
      color: rgb(150, 151, 153);
      user-select: none;
      .btn-item {
        line-height: 36px;
        flex: 1;
        -webkit-flex: 1;
        border-radius: 0px 5px 5px 0px;
        background-color: #fff;
        font-size: 16px;
        cursor: pointer;
        &:first-child {
          border-radius: 5px 0 0 5px;
        }
        &.active {
          color: #fff;
          background-image: linear-gradient(to left, #41e5ef, #10a2eb);
        }
      }
    }
    .form-wrap {
      background-color: #fff;
      padding: 25px 25px;
      border-radius: 4px;
      height: 300px;
      &:before,
      &:after {
        position: absolute;
        content: "";
        bottom: 12px;
        left: 15px;
        top: 80%;
        width: 45%;
        background: #ccc;
        z-index: -1;
        -webkit-box-shadow: 0 20px 15px #ccc;
        -moz-box-shadow: 0 20px 15px #ccc;
        box-shadow: 0 20px 15px #ccc;
        -webkit-transform: rotate(-6deg);
        -moz-transform: rotate(-6deg);
        transform: rotate(-6deg);
      }
      &:after {
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        transform: rotate(6deg);
        right: 15px;
        left: auto;
      }
      .wel {
        color: #10a2eb;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .check-line {
        height: 21px;
        text-align: right;
        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: #fff;
          border-color: #ccc;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner::after {
          border-color: #10a2eb;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #10a2eb;
        }
      }
      .btn-login {
        width: 100%;
        background-image: linear-gradient(to left, #41e5ef, #10a2eb);
        margin-bottom: 0;
        border-color: transparent;
      }
    }
  }
  .bottom-area {
    width: 100%;
    flex: 1;
    -webkit-flex: 1;
    background-color: rgb(235, 244, 255);
    position: relative;
    .copy-right {
      position: absolute;
      bottom: 40px;
      width: 100%;
      text-align: center;
    }
  }
}
.f16 {
  font-size: 16px;
}
</style>



